<template>
    <div class="home_special">
        <!-- 精选专题栏 -->
        <div class="special_header">
            <p>精选专题</p>
            <img src="../../assets/箭头右.png" alt="">
        </div>
        <!-- 精选专题文章 -->
        <div class="special_container">
            <div class="special_wrapper">
                <div class="special_item" 
                v-for="(item,index) in special" :key="index">
                    <div class="special_item_img">
                        <img :src="item.pic" alt="">
                    </div>
                    <div class="special_item_title" v-html="item.title"></div>
                    <div class="special_item_message"><p>{{item.descript}}</p></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            // special:[]
        }
    },
    computed:{
        special(){


            return this.$store.state.specialModules.special
            // return []
        }
    },
    mounted(){
        this.$store.dispatch('specialList',)
    }
}
</script>

<style scoped>
.home_special {
  width: 100%;
}
.special_header {
  width: 100%;
  height: 1rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.special_header p {
  font-size: 0.3rem;
}
.special_header img {
    width: 0.25rem;
    margin-left: 0.06rem;
}
.special_container {
    width: 100%;
    overflow-x: scroll;
}
.special_wrapper {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
}
.special_item {
    width: 5rem;
    margin: 0.2rem;
}
.special_item_img {
    border-radius: 0.2rem;
    overflow: hidden;
}
.special_item_img img{
    width: 5rem;
    height: 2.8rem;
}
.special_item_title {
    font-size: 0.27rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.special_item_message p {
    width: 100%;
    margin-top: 0.1rem;
    color: gray;
    font-size: 0.22rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
</style>